﻿@import "Colours.scss";
@import "Metrics.scss";

@-moz-keyframes dropTile {
    0% {
        opacity: 0;
        -moz-transform: scale(2.5);
    }

    100% {
        opacity: 1;
        -moz-transform: scale(1);
    }
}

@-webkit-keyframes dropTile {
    0% {
        opacity: 0;
        -webkit-transform: scale(2.5);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@keyframes dropTile {
    0% {
        opacity: 0;
        transform: scale(2.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.grid {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .tileColor0 {
        background-color: $theme-lime-color;
    }

    .tileColor1 {
        background-color: $theme-green-color;
    }

    .tileColor2 {
        background-color: $theme-emerald-color;
    }

    .tileColor3 {
        background-color: $theme-teal-color;
    }

    .tileColor4 {
        background-color: $theme-cyan-color;
    }

    .tileColor5 {
        background-color: $theme-cobalt-color;
    }

    .tileColor6 {
        background-color: $theme-indigo-color;
    }

    .tileColor7 {
        background-color: $theme-violet-color;
    }

    .tileColor8 {
        background-color: $theme-pink-color;
    }

    .tileColor9 {
        background-color: $theme-magenta-color;
    }

    .tileColor10 {
        background-color: $theme-crimson-color;
    }

    .tileColor11 {
        background-color: $theme-red-color;
    }

    .tileColor12 {
        background-color: $theme-orange-color;
    }

    .tileColor13 {
        background-color: $theme-amber-color;
    }

    .tileColor14 {
        background-color: $theme-yellow-color;
    }

    .tileColor15 {
        background-color: $theme-brown-color;
    }

    .tile {
        position: relative;
        width: $tile-size;
        height: $tile-size;
        float: left;
        margin: $sub-unit - $border-size;
        border: solid $border-size $background-color;
        color: $background-color;
        -webkit-animation: dropTile 0.5s ease;
        -moz-animation: dropTile 0.5s ease;
        animation: dropTile 0.5s ease;
        -webkit-transition: border-color 0.3s ease, width 0.3s ease;
        -moz-transition: border-color 0.3s ease, width 0.3s ease;
        transition: border-color 0.3s ease, width 0.3s ease;
        overflow: hidden;

        @media #{$phone} {
            width: $phone-tile-size;
            height: $phone-tile-size;
        }

        &:hover {
            border-color: $primary-dark-color;
            -webkit-transition: border-color 0.3s ease;
            -moz-transition: border-color 0.3s ease;
            transition: border-color 0.3s ease;
        }

        .title {
            position: absolute;
            font-size: $tile-size / 7;
            height: ( $tile-size - ( $sub-unit * 2 ) ) / 4;
            -ms-text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            left: $sub-unit * 2;
            bottom: 0px;

            @media #{$phone} {
                font-size: $phone-tile-size / 7;
            }
        }

        .count {
            position: absolute;
            font-size: $tile-size / 2.5;
            height: ( $tile-size - ( $sub-unit * 2 ) ) / 3 * 2;
            top: 0px;
            right: $sub-unit * 2;

            @media #{$phone} {
                font-size: $phone-tile-size / 2.5;
            }
        }

        .text {
            position: absolute;
            font-size: $tile-size / 7;
            left: $sub-unit * 2;
            right: $sub-unit * 2;
            top: $sub-unit;
            bottom: $sub-unit;

            @media #{$phone} {
                font-size: $phone-tile-size / 7;
            }
        }

        .price {
            position: absolute;
            font-size: $tile-size / 3;
            bottom: 0px;
            right: $sub-unit * 2;

            @media #{$phone} {
                font-size: $phone-tile-size / 3;
            }
        }
    }
}
